<template>
	<div class="mian">
		<div class="outDiv">
			<!-- <scroller lock-x> -->
			<div>
				<!-- <Header></Header> -->
				<go-back aa='../volunteer/indexs'></go-back>
				<div class="scrollerDiv">
					<div class="stepImage">
						<img src="~/static/images/step3.png" style="width: 100%">
					</div>
					<div class="container">
						<div class="include">

							<x-circle :percent="percent" :stroke-width="10" stroke-color="#89CC4E" trail-color="#F1F1F1" :trail-width="10">
								<!--  <div class="innerDiv" @touchstart="gotouchstart" @touchmove="gotouchmove" @touchend="gotouchend"> -->
								<div class="innerDiv" @click="gotosBalance">
									<div>
										<!-- <svg-icon icon-class="volunteer_icon_click" /> -->
										<div style="height: 1rem;" v-if="loadflag==false">
											<img class="imgIcon" src="~/static/images/volunteer_icon_click.png" alt="">	
										</div>
										<div style="height: 0.5rem" v-else></div>
										<!-- <img v-show="loadflag==true" style="width: 0.6rem;height: 0.6rem;" class="imgIconGif" src="~/static/images/5-121204193R0.gif" alt=""> -->
									</div>
									<p >{{loadflag?'生成方案中...':'生成方案'}}</p>
								</div>
							</x-circle>
						</div>
					</div>
				</div>
				<!-- <div style="width: 7.5rem;height: 1.5rem;"></div> -->
			</div>
			<!-- </scroller> -->
		</div>
	</div>
</template>

<script>
	import {
		Scroller,
		XCircle
	} from "vux";
	import Header from "~/components/Header";
	import ls from 'store2'
	import {
		setInterval,
		clearInterval
	} from 'timers';
	import goBack from '~/components/goBack'
	import axios1 from '~/plugins/axios1'
	export default {
		components: {
			Header,
			Scroller,
			XCircle,
			goBack
		},
		data() {
			return {
				nun:0,
				loadflag:false,
				percent: 0,
				timer: null,
				timeOutEvent: 0,
				userType: null,
			}
		},
		mounted() {
			this.userType = this.$route.query.type;
			if(this.commonJs.isTerminal()=='isAndroid'){
				if (window.history && window.history.pushState) {
				history.pushState(null, null, document.URL);
				window.addEventListener('popstate', this.fun, false); //false阻止默认事件 
			}
			}
		},
		destroyed: function() {
			window.removeEventListener('popstate', this.fun, false); //false阻止默认事件
		},
		created() {
			this.commonJs.gologins();
		},
		methods: {
			fun() {
				this.$router.replace({
					path: '../volunteer/indexs'
			
				})
			
			},
			createCase(tysp) {
				axios1.posts('/volunteer/getBalance?type=' + tysp + '&userType=' + this.userType).then(res => {
					if (res.code === '0') {
						ls.set('caseData'+tysp,res.data)
						setTimeout(()=>{
							this.$vux.loading.hide();
							ls.set('preUrl','stepThree')
							this.commonJs.gosto('programme')
						},30)
// 						setTimeout(()=>{
// 							// this.$vux.loading.hide()
// 							// this.goto('balance',tysp)	
// 						},50)
						
					}else{
						this.$vux.toast.text('系统繁忙，请稍后再试');
						this.$vux.loading.hide()
					}
					
				}).catch((error) => {
					this.$vux.toast.text(error);
					this.gotouchmove()
				})
			},
			getStudentInfo() {
				// axios1.post('/volunteer/generateSolutions', { userType: this.userType }).then(res => {
				axios1.post('/volunteer/generateSolutions?userType=' + this.userType).then(res => {
					if (res.code === '0') {
						// 		
							this.createCase(1);
							this.createCase(2);
							this.createCase(3);
						// this.$vux.loading.hide();
						
						
						// this.goto('programme')
						return false;

					}
					if (res.code = '1200004') {
						this.$vux.toast.text(res.message);
						clearInterval(this.timer);
						this.$vux.loading.hide();
						return false;
					}
				}).catch((error) => {
					this.$vux.toast.text('系统繁忙，请稍后再试');
				})
			},
			gotosBalance() {
				this.nun+=1
				this.loadflag=true;
				console.log(this.nun)
				if(this.nun===1){
					console.log('aaaa')
					this.circleTurnAround()
					this.getStudentInfo();
				
				}
				
				
			},
			//开始按
			gotouchstart() {
				let that = this;
				clearTimeout(this.timeOutEvent); //清除定时器
				this.timeOutEvent = 0;
				this.circleTurnAround()
			},
			//手释放，如果在500毫秒内就释放，则取消长按事件，此时可以执行onclick应该执行的事件
			gotouchend() {
				console.log('this.gotouchend', this.percent)
				clearInterval(this.timer);
				clearTimeout(this.timeOutEvent);
				if (this.timeOutEvent != 0) {
					//这里写要执行的内容（尤如onclick事件）
					console.log(222222)
					// this.percent += 1;
				}
			},
			//如果手指有移动，则取消所有事件，此时说明用户只是要移动而不是长按 
			gotouchmove() {
				console.log('this.gotouchmove', this.percent)
				clearInterval(this.timer);
				clearTimeout(this.timeOutEvent); //清除定时器
				this.timeOutEvent = 0;
			},
			circleTurnAround() {
				this.timer = setInterval(() => {
					this.percent += 1;

					if (this.percent > 100) {
						clearInterval(this.timer);
						this.percent = 100;
						// this.goto('programme')
						console.log('加载完成')
					}
				}, 300);
			},
			goto(routerName, queryData) {
				this.$router.replace({
					path: routerName,
					query: {
						type: queryData
					}
				});
			},

		}
	};
</script>

<style lang="less" scoped>
	.outDiv {
		width: 100%;
		height: 100vh;
		background: #fff;

		.scrollerDiv {
			width: 100%;

			.stepImage {
				margin-bottom: 0.9rem;
				padding: 0 0.3rem;

			}

			.container {
				width: 100%;
				height: 7.5rem;
				background: url('~/static/images/volunteer_pic_bg_slices.png') no-repeat;
				background-size: 100% 100%;
				padding-top: 2.1rem;

				.include {
					margin: 0 auto;
					width: 3.4rem;
					height: 3.4rem;

					.innerDiv {
						border-radius: 50%;
						margin-left: 0.3rem;
						width: 2.8rem;
						height: 2.8rem;
						text-align: center;
						padding-top: 0.54rem;
						background: #fff;
						-webkit-touch-callout: none;
						/*系统默认菜单被禁用*/
						-webkit-user-select: none;
						/*webkit浏览器*/
						-khtml-user-select: none;
						/*早期浏览器*/
						-moz-user-select: none;
						/*火狐*/
						-ms-user-select: none;
						/*IE10*/
						user-select: none;




						div {
							padding-bottom: 0.2rem;

							.imgIcon {
								z-index: -1;
								width: 1rem;
								height: 1rem;
								pointer-events: none;
							}
						}

						p {
							color: #6CBF20;
							font-size: 0.3rem;
							font-weight: bold;
							letter-spacing: 0.03rem;
						}
					}
				}
			}
		}
	}

	svg {
		width: 0.4rem;
		height: 0.4rem;
	}
</style>
